<!--
 *                   ___====-_  _-====___
 *             _--^^^#####//      \\#####^^^--_
 *          _-^##########// (    ) \\##########^-_
 *         -############//  |\^^/|  \\############-
 *       _/############//   (@::@)   \############\_
 *      /#############((     \\//     ))#############\
 *     -###############\\    (oo)    //###############-
 *    -#################\\  / VV \  //#################-
 *   -###################\\/      \//###################-
 *  _#/|##########/\######(   /\   )######/\##########|\#_
 *  |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
 *  `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
 *     `   `  `      `   / | |  | | \   '      '  '   '
 *                      (  | |  | |  )
 *                     __\ | |  | | /__
 *                    (vvv(VVV)(VVV)vvv)
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                神兽保佑            永无BUG
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-02-25 16:16:32
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-23 16:46:24
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <el-card class="container" shadow="never">
    <div slot="header" class="header">
      <div class="title">
        联系我们
        <i class="el-icon-phone icon" />
      </div>
    </div>
    <div class="content">
      <div class="item">
        <div class="title">服务电话</div>
        <div class="detail black">400-186-3996</div>
      </div>
      <div class="item">
        <div class="title">邮箱</div>
        <div class="detail blue">shangwu@bjxzkj.net</div>
      </div>
    </div>
    <div class="footer">
      <div class="item" @click="$router.push('/account/feedback')">
        <svg-icon icon-class="gongdan"></svg-icon>
        工单
      </div>
    </div>
  </el-card>
</template>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.content {
  padding-top: 6px;
  display: flex;
  .item {
    flex: 1;
    .title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
    .detail {
      margin: 12px 0 0;
      font-size: 20px;
      .icon {
        font-size: 22px;
      }
      &.black {
        color: rgba(0, 0, 0, 0.85);
      }
      &.blue {
        color: $primary;
      }
    }
  }
}
</style>
